<script lang='ts' setup>
import { IFormItem } from "../../../type";
import InputOption from "./fat-form-create-editor-item-edit-input.vue";
import NumberOption from "./fat-form-create-editor-item-edit-number.vue";
import SelectOption from "./fat-form-create-editor-item-edit-select.vue";
import RadioOption from "./fat-form-create-editor-item-edit-radio.vue";
import CheckboxOption from "./fat-form-create-editor-item-edit-checkbox.vue";
import SwitchOption from "./fat-form-create-editor-item-edit-switch.vue";
import TimeSelectOption from "./fat-form-create-editor-item-edit-time-select.vue";
import ArrayContainer from "./fat-form-create-editor-item-edit-arrayContainer.vue";
import UploadOption from './fat-form-create-editor-item-edit-upload.vue'

interface IProps {
  item: IFormItem
}
interface IEmit {
  (event: "update:item", data: any): void
  (event: "fixData", data: any): void
}
const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()

</script>

<template>
  <fieldset class="fat-setting-box">
    <legend>表单设置</legend>
    <el-row>
      <el-col :span="8">
        <el-form-item label="表单显示" prop="inEdit">
          <el-switch v-model="item.inEdit" @change="$emit('change', $event)" :active-value="true"
            :inactive-value="false" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否必填" prop="required">
          <el-switch v-model="item.required" :disabled="!item.inEdit" :active-value="true" :inactive-value="false" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="隐藏标签" prop="labelHidden">
          <el-switch v-model="item.labelHidden" :active-value="true" :inactive-value="false" />
        </el-form-item>
      </el-col>
    </el-row>
    <InputOption v-if="item.type === 'input' || item.type === 'textarea' || item.type === 'password'" :item="item" />
    <NumberOption v-if="item.type === 'number'" :item="item" />
    <RadioOption v-if="item.type === 'radio'" :item="item" />
    <CheckboxOption v-if="item.type === 'checkbox'" :item="item" />
    <SwitchOption v-if="item.type === 'switch'" :item="item" />
    <SelectOption v-if="item.type === 'select'" :item="item" />
    <TimeSelectOption v-if="item.type === 'time-select'" :item="item" />
    <ArrayContainer v-if="item.type === 'arrayContainer'" :item="item" />
    <UploadOption v-if="item.type === 'upload'" :item="item" />
  </fieldset>
</template>

<style lang='scss' scoped></style>